<template>
  <div>
    <div class="tutor-detail" style="margin-bottom:0px;">
      <span class="tutor" style="display:block;background-image:none;">
        <div class="avatar">
          <div class="avatar" style="position:relative;width:3.5rem;height:3.5rem;border-radius:50%;display:inline-block;">
            <img style="position:relative;width:3.5rem;height:3.5rem;border-radius:50%;display:inline-block;" class="avatarImg" :src="this.userList.headImg ? this.userList.headImg : 'http://p0.so.qhmsg.com/t01e8152f43588b027f.jpg'">
            <span></span>
          </div>
        </div>
        <div class="nickname">{{this.userList.name}}</div>
        <p class="intro" v-if="this.userList.identity === '1' || this.userList.identity === '2'">{{this.userList.professional}}</p>
        <p class="intro" v-if="this.userList.identity === '0'">{{this.userList.personalSignature}}</p>
        <span class="edit" @click="edit">
          <i><img src="../../images/bianji.png" alt=""></i>
        </span>
      </span>
      <div class="title"></div>
      <div class="introduction"></div>
      <div class="profile">
        <p class="highlight">账户余额
          <span>￥</span>
          <span>{{this.userList.balance}}</span>
        </p>
        <!-- <p>收入请手动提现到个人的微信钱包</p> -->
        <p>提现功能两个月后才能提现</p>
        <div class="getcash">
          <button>提现</button>
        </div>
      </div>
    </div>
    <div class="Links">
      <div>
        <ul class="me-items">
          <li class="item">
            <span class="link" @click="gotowatch">
              <span class="icons my"></span>
              <span class="text">我的关注</span>
              <span class="authentication-tip"></span>
            </span>
          </li>
          <li class="item" @click="gotoFans">
            <span class="link">
              <span class="icons my"></span>
              <span class="text">我的粉丝</span>
              <span class="authentication-tip"></span>
            </span>
          </li>
          <li class="item" @click="gotoResolve">
            <span class="link">
              <span class="icons my"></span>
              <span class="text">我发布的问题</span>
              <span class="authentication-tip"></span>
            </span>
          </li>
          <li class="item" @click="gotoMyAnswer">
            <span class="link">
              <span class="icons need"></span>
              <span class="text">我的回答</span>
              <span class="authentication-tip"></span>
            </span>
          </li>
          <li class="item" @click="gotoDynamic">
            <span class="link">
              <span class="icons need"></span>
              <span class="text">我的动态</span>
              <span class="authentication-tip"></span>
            </span>
          </li>
          <li class="item" @click="gotoApprove">
            <span class="link">
              <span class="icons approve"></span>
              <span class="text">申请认证</span>
              <span class="authentication-tip"></span>
            </span>
          </li>
          <li class="item">
            <span class="link">
              <span class="icons help"></span>
              <span class="text">帮助</span>
              <span class="authentication-tip"></span>
            </span>
          </li>
          <li class="item">
            <span class="link">
              <span class="icons setting"></span>
              <span class="text">设置</span>
              <span class="authentication-tip"></span>
            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { education as Api } from '../../api/education';
export default {
  data() {
    return {
      userList: {},
      userids: ''
    };
  },
  methods: {
    init() {
      Api.personalInfo.call(this, {}, data => {
        this.userList = data.personalInfo;
        this.userids = data.personalInfo.userId;
      });
    },
    edit() {
      this.$router.push({ path: `/personal`, query: { userid: this.userids } });
    },
    gotoApprove() {
      this.$router.push({ path: `/Approve`, query: { userid: this.userids } });
    },
    gotoResolve() {
      this.$router.push({ path: `/Resolve` });
    },
    gotoMyAnswer() {
      this.$router.push({ path: `/MyAnswer` });
    },
    gotowatch() {
      this.$router.push({ path: `/Fanswatch`, query: { type: 'watch' } });
    },
    gotoFans() {
      this.$router.push({ path: `/Fanswatch`, query: { type: 'fans' } });
    },
    gotoDynamic() {
      this.$router.push({ path: `/Dynamic` });
    }
  },
  created() {
    let getUrlStr = function(name) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    };
    let code = getUrlStr('code');
    if (code === null) {
      this.init();
      }
	}
};
</script>

<style lang="less">
.tutor-detail {
  padding: .9rem;
  padding-bottom: .625rem;
  background: #fff;
  position: relative;
  .tutor {
    padding: 0.6rem 4.5rem 0 4rem;
    position: relative;
    height: 2.65rem;
    line-height: 1.5;
    // background-image: url(../../images/xiayiji.png);
    background-size: .325rem .65rem;
    background-position: 100%;
    background-repeat: no-repeat;
    .intro {
      text-align: left;
      font-size: .7rem;
      color: #999;
      line-height: 1.2rem;
    }
    .nickname {
      font-size: .85rem;
      color: #333;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .avatar {
      position: absolute;
      top: 0;
      left: 0;
    }
    .edit {
      float: right;
      display: block;
      margin-right: -4rem;
      margin-top: -1.5rem;
      img {
        width: 1.5rem;
      }
    }
  }
  .title {
    margin: 1.5rem 0;
    border-bottom: 1px solid #ccc;
  }
  .profile {
    margin-top: .5rem;
    p {
      text-align: left;
      font-size: .7rem;
      color: #999;
      line-height: 1.2rem;
    }
    .highlight {
      color: #191919;
      span {
        color: #F75F48;
      }
      span:nth-child(2) {
        font-size: 1.5rem
      }
    }
    .getcash {
      float: right;
      margin-top: -2.5rem;
      button {
        width: 4rem;
        height: 2rem;
        background: #F75F48;
        color: #fff;
        border-radius: 30px;
        border: none;
        font-size: .9rem;
      }
    }
  }
}

.Links {
  margin-bottom: 60px;
  padding-bottom: 1px;
  background: #F5F5F5;
  .me-items {
    margin: .75rem 0 0;
    .item {
      background: #fff;
      padding: 0 1rem;
      .link {
        font-size: .8rem;
        color: #3f3f3f;
        height: 2.75rem;
        line-height: 2.75rem;
        padding: 0 0 0 .85rem;
        display: block;
        text-decoration: none;
        background-image: url(../../images/arrow_right.png);
        background-size: .325rem .65rem;
        background-position: 100%;
        background-repeat: no-repeat;
        border-bottom: 1px solid #f5f5f5;
      }
      .icons {
        display: inline-block;
        vertical-align: middle;
        width: 1.5rem;
        height: 1.5rem;
        background-size: 1.5rem 1.5rem;
        background-position: 50%;
        background-repeat: no-repeat;
        background-image: url(../../images/m1.png);
      }
      .text {
        display: inline-block;
        vertical-align: middle;
        padding-left: .5rem;
      }
      .need {
        background-size: auto 1rem;
        background-image: url(../../images/m2.png);
      }
      .approve {
        background-image: url(../../images/m3.png);
      }
      .help {
        background-image: url(../../images/m4.png);
      }
      .setting {
        background-image: url(../../images/m5.png);
      }
    }
  }
}
</style>
